<template>
  <div>
    <div @click="openDrawer" class="drawer color">drawer</div>
  <FouDrawer ref="Drawer"></FouDrawer>
  <HomeView ref="home"></HomeView>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

import FouDrawer from "@/components/foundation/FouDrawer.vue";
import HomeView from './HomeView.vue'
const Drawer = ref(null);
const home = ref('')
const openDrawer = ()=>{
  home.value.asd()
  Drawer.value.value = true
}

</script>


<style lang='less' scoped>
@import "@/assets/less.less"; 
.drawer{
  color: @aside;
}
.div1{
  width: 100px;
  height: 50px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.div1:hover{
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);

}
</style>